/**
 * Mullis Masonry Inc.
 */

$purewhite     : rgb(255,255,255);
$white         : hsl(42,10%,90%);
$black         : lighten( black, 20% );
$color1        : rgb(88,24,3);
$color2        : darken( $color1, 10% );
$color3        : darken( $color1, 20% );
$font          : 16;
$unit          : $font;
$CopyColor     : $black;
$fontHeading   : Vollkorn, serif;
$fontCopy      : "Helvetica Neue", Helvetica, "Trebuchet MS", Arial, sans-serif;
$themeFolder   : '/themes/mullis/';
$themeImages   : $themeFolder + 'images/';

@mixin box-sizing( $p: 'border-box' ) {
  -moz-box-sizing: $p;
  -webkit-box-sizing: $p;
  box-sizing: $p;
}

// Includes
// --------------------------------------------------
@import 'liriope_goodies'; // This holds basic SASS mixins and functions that will be useful across all projects
@import 'settings';   // Project specific settings
@import 'base';       // Base controls basic tags and is the foundation for all other styles
@import 'layouts';    // Layouts are helper styles that define layout only
@import 'page';       // Styles that will apply to each page, for example, the page title or 1st heading1
@import 'navigation'; // How the main site navigation looks
@import 'gallery';    // Anywhere that a series of images occurs, this is where it is styled
@import '../../../fonts/icomoon/style.css'; // This is the icon font

// Google Web Fonts
// --------------------------------------------------
@import url(http://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700);

// Helpers
// --------------------------------------------------
.clear:after {
    content: ".";
    display: block;
    height: 1px;
    line-height: 1px;
    visibility: hidden;
    clear: both;
}

img.right,
figure.right
{
  float: right;
  margin-left: $unit * 2 + px;
  margin-bottom: $unit * 2 + px;
}

img.left,
figure.left
{
  float: left;
  margin-right: $unit * 2 + px;
  margin-bottom: $unit * 2 + px;
}

// HTML Basic
// --------------------------------------------------
html {
    min-height: 100%;
    overflow-y: scroll;

    background: $purewhite url('/images/wallpaper-PVFD2.jpg') no-repeat center center fixed;
    @include vendor(background-size, cover);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/wallpaper-PVFD2.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/wallpaper-PVFD2.jpg', sizingMethod='scale')";
}

body {
    position: relative;
    margin: 0 auto;
    font-family: $fontCopy;
    color: $CopyColor;
    line-height: 1.68;
    padding-bottom: $unit;
}

:focus {
  outline: none;
}

::selection {
  background: $color1;
  color: #fff;
}

a,
a:link,
a:active,
a:visited
{
  color: $color1;

  @include transition(color,0.125s,linear);

  &:hover {
    color: darken( $color1, 25 );
  }
}

aside {
  float: right;
  margin: 0 0 1em 1em;
  padding: .75em;
  width: 25%;
  border-style: solid;
  border-width: 0 0 0 1px;

  &.left {
    float: left;
    margin: 0 1em 1em 0;
    border-width: 0 1px 0 0;
  }
}

// Headings
// --------------------------------------------------
h1, h2, h3, h4, h5, h6
{
  font-family: $fontHeading;
  margin: 0.75em 0 0;
  line-height: 1.6;
}

.drophead {
  font-weight: 900;
}

h1 + .drophead {
  @include fontSize($unit*1.5);
}

h1 {
  @include fontSize($unit*2);
  font-weight: normal;
  color: $color1;
}
h2 {
  @include fontSize($unit*1.5);
  font-weight: 500;
  color: $color2;
}
h3 {
  @include fontSize($unit*1.125);
  color: darken( $color2, 10% );
}
h4 {
  @include fontSize($unit);
  color: darken( $color2, 20% );
}
h5 {
  @include fontSize($unit*0.875);
  color: darken( $color2, 20% );
}
h6 {
  @include fontSize($unit*0.75);
  color: darken( $color2, 20% );
}

// place this after the h# tags
hgroup 
{
  margin: 2em 0;
  * { margin: 0; }
}

// Body copy elements
// --------------------------------------------------
li {
  * {
    // 2nd level elements are smaller
    font-size: $unit * 12/16;
  }
}

dl {
  dt {
    font-weight: bold;
    margin-top: 0.5em;
  }

  dd {
  }
}

article {
  footer {
    font-size: $unit * 0.75;
    color: lighten( $CopyColor, 30);
  }
}

// Site Header elements
// --------------------------------------------------

$logow:       255px;
$logoh:       202px;
$logooverlap: 65px;

.site-header {
  @include gradient(hsl(43,10%,75%),hsl(43,10%,95%));
  @include box-shadow(0px, 5px, 15px, rgba(0,0,0,0.5));
  @include rem(margin-top, 150);
  @include rem(padding-top, 20);
  @include rem(padding-right, 20);
  @include rem(padding-bottom, 20);
  @include rem(padding-left, 20);
  padding-top: $logooverlap;
  position: relative;

  footer {
      @include fontSize(12);
  }
}

.site-identity {
    overflow: hidden;

    a {
        @include fontSize(36);
        font-weight: bold;
        color: $black;
        text-decoration: none;

        width: $logow;
        height: $logoh;
        display: block;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: $logow/2*-1;
        margin-top: ($logoh - $logooverlap)*-1;
    }
}

.social-icons {
    list-style: inside none;
    margin: 2 * $unit + px 0;
    padding: 0;
    padding-left: $unit * 1.5px;

    li {
        display: inline;

        a {
            text-decoration: none;
            @include rem(font-size, 20);
            padding-right: $unit * 0.5px;
        }
    }
}

.site-content {
    @include rem(margin-top, 150);
}

.site-footer {
  border-top: 1px solid;
  margin-top: 2em;
  padding-top: 2em;

  p {
    @include fontSize($unit*0.75);
  }
}

.text-content-box {
    background-color: $white;
    @include rem(padding-top, 20);
    @include rem(padding-right, 20);
    @include rem(padding-bottom, 20);
    @include rem(padding-left, 20);
    @include box-shadow(0px, 5px, 15px, rgba(0,0,0,0.5));
    @include clearfix();
}

// Gallery
// --------------------------------------------------
.gallery {
  .frame {
    width: 200px;
    height: 200px;
    overflow: hidden;

    a {
      display: block;
      overflow: hidden;
    }
    .image {
      display: block;
      width: 200px;
      height: 200px;
      background-size: cover;
      background-position: 50% 50%;
    }
  }
}

// Random... TODO
// Clean up and organize these
// --------------------------------------------------
.tag-nav {
    & > ul {
        & > li {
            & > a {
                text-decoration: none;
                font-size: $unit * 0.75px;
                background-color: $white;
                color: $color1;
                padding: $unit * 0.5px;
                @include border-radius();
            }
        }
    }
}
